<template>
	<view class="goodDetail">
		<!-- 		<view class="Narbar">
			<view class="back" :style="{ height: heightConfig.navBarPaddingTop + 'px' }"></view>
		</view> -->
		<view class="swiper">
			<u-swiper height="100%" indicatorActiveColor="#000" indicatorInactiveColor="#fff" :list="swiperList"
				indicator imgMode="widthFix" indicatorMode="line" circular></u-swiper>
			<view class="Narbar_bo">
				<view class="icon" @click="pageBack" style="width: 40rpx;height: 40rpx;background-color: #efe8e8a1;border-radius: 50%;display: flex;justify-content: center;align-items: center;">
					<u-icon color="#000" name="arrow-left" bold="true"></u-icon>
				</view>
				<view class="title" size="19px"></view>
				<view></view>
			</view>
		</view>

		<view class="introduce">
			<view class="price">
				<view class="num">
					<view class="Novip">￥<span class="span">{{ goodDetail.retailPrice }}</span></view>
					<view class="crossed"><span class="span">￥{{ goodDetail.originalPrice }}</span></view>
					<view class="VipPrice" v-if="goodDetail.discountPrice">
						<view class="vip"></view>
						<span class="span">￥{{ goodDetail.discountPrice }}</span>
					</view>
				</view>
				<view class="sale">已销
					<span class="span">{{ goodDetail.virtualSales || 0 }}</span> 件
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="‌synopsis‌">{{ goodDetail.goodName }}</view>
				<view class="joinCar">
					<view class="txt" @click="userShow()">分享</view>
				</view>
			</view>

			<!-- <view class="paratext"
        >商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</view
      > -->
		</view>
		<!-- <view class="choose">
      <view class="title">选择</view>
      <view class="chooseItem">
        <view class="txt">默认套装</view>
        <view class="icon" @click="show = true">
          查看
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view> -->
		<view class="evaluate">
			<view class="title">
				<view class="txt">商品评价</view>
				<view class="icon" @click="toEvaluateList">
					查看全部
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-for="(item, index) in evaluateList" class="informationi" :key="index">
				<view class="information">
					<view class="author">
						<view class="image">
							<image class="images" :src="item.userAvatar"></image>
						</view>
						<view class="author_info">
							<view class="nameALevel">
								<view class="name">{{ item.nickName }}</view>
								<image v-if="item.level == 1" class="image" src="/static/images/my/vip.png" />
								<image v-if="item.level == 2" class="image" src="/static/images/my/svip.png" />
							</view>
							<view class="time">{{ item.reviewTime }}</view>
						</view>
					</view>
					<view class="stars">
						<u-rate :count="5" v-model="item.reviewScore" activeColor="#ff4254" readonly></u-rate>
					</view>
				</view>
				<view class="comment">{{ item.reviewContent }}</view>
				<view class="pics" v-if="item.pics && item.pics.length > 0">
					<!-- 一张图片 -->
					<template v-if="item.pics.length == 1">
						<image v-for="(childItem, childIndex) in item.pics" :src="childItem" :key="childIndex"
							class="pics-item-2" />
					</template>
					<!-- 两张 或 四张 -->
					<template v-else-if="item.pics.length == 2 || item.pics.length == 4">
						<image v-for="(childItem, childIndex) in item.pics" :src="childItem" :key="childIndex"
							class="pics-item-2" />
					</template>
					<!-- 三张或其他  -->
					<template v-else>
						<image v-for="(childItem, childIndex) in item.pics" :src="childItem" :key="childIndex"
							class="pics-item-3" />
					</template>
					<view class="comment" v-if="item.merchantReplyContent">客服：{{ item.merchantReplyContent }}</view>
				</view>
			</view>
		</view>
		<view class="goodIntroduce">
			<view class="title">商品介绍</view>
			<view class="shop-image">
				<image mode="widthFix" v-for="(item, index) in goodBannerImg" :key="index" :src="baseImgUrl + item">
				</image>
			</view>
		</view>
		<view class="bottom">
			<view class="box" @click="call">
				<image src="../../static/images/detail/service.png" mode=""></image>
				<view class="txt" style="color: #000">客服</view>
			</view>
			<view class="box" @click="collectFun">
				<image v-if="goodDetail.isCollect == 1" src="../../static/images/detail/active_heart.png" mode="">
				</image>
				<image v-else src="../../static/images/detail/heart.png" mode=""></image>
				<view class="txt" :style="{ color: goodDetail.isCollect == 1 ? '#ff4254' : '#000' }">收藏</view>
			</view>
			<!-- v-if="!goodDetail.ifPurchase" -->
			<view class="joinCar">
				<!-- @click="addShoppingCart" -->
				<!-- <view class="txt">加入购物车</view> -->
			</view>
			<view class="immeBuy">
				<view class="txt" @click="pageTo(goodId)">立即购买</view>
			</view>
		</view>
		<fui-toast ref="toast"></fui-toast>




		<u-popup :show="userQrShow" mode="center" :round="10" bgColor="#fff" @close="userQrShow = false">
			<view class="popup-qr">
				<l-painter ref="painter" isCanvasToTempFilePath @success="painterSuccess">
					<template v-show="userQrShow">
						<l-painter-view css="padding:20rpx;border-radius:20rpx;background:#fff; ">
							<l-painter-text text="邀请好友加入本维美"
								css="display:block;margin-bottom:20rpx;font-size:26rpx;font-weight:600;"></l-painter-text>
							<l-painter-text text="这件商品不错哦"
								css="display:block;margin-bottom:20rpx;font-size:20rpx;color:#b8b8b8;"></l-painter-text>

							<l-painter-image :src="swiperList[0]"
								css="width:490rpx;height:490rpx;margin-bottom:40rpx" />

							<l-painter-view css="height:110rpx;">
								<l-painter-image :src="userQR.avatar"
									css="width:80rpx;height:80rpx;margin:16rpx 40rpx 0 0;border-radius:50%;" />

								<l-painter-view css="display:inline-block;margin: 16rpx 0 0 0;">
									<l-painter-text :text="userQR.nickName"
										css="display:block;font-size:26rpx;text-align:center;"></l-painter-text>
									<l-painter-text :text="userQR.ID"
										css="display:block;font-size:20rpx;color:#b8b8b8;text-align:center;"></l-painter-text>
								</l-painter-view>

								<l-painter-view v-if="userInfo.memberLevel != 0" css="display:inline-block;">
									<l-painter-image :src="userQR.QrCode"
										css="width:110rpx;height:110rpx;margin-left:80rpx" />
								</l-painter-view>
							</l-painter-view>
						</l-painter-view>
					</template>
				</l-painter>
				<view class="btn" @click="saveImg">
					<u-icon color='red' size='26' name="download"></u-icon>
					<view class="btn-test">保存到手机</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import narBar from '../../components/nav-bar/index.vue'
	import productApi from "@/api/product";
	import shoppingCart from "@/api/shoppingCart";
	import collectApi from "@/api/collect";
	import userApi from "@/api/user";
	import fuiToast from "@/components/fui-toast/fui-toast";
	import {
		baseImgUrl,
		baseUrl
	} from "@/config";
	import {
		getToken
	} from "@/utils/auth";
	import {
		nextTick
	} from "vue";
	import loginApi from "@/api/login";

	const fs = uni.getFileSystemManager();
	export default {
		name: "goodDetail",
		components: {
			fuiToast,
		},
		data() {
			return {
				homePage:false,
				userInfo: {},
				userQrShow: false,
				// disabledPlus: false,
				baseImgUrl,
				baseUrl,
				goodId: null,
				goodDetail: {},
				swiperList: [],
				disabledMinus: true,
				active_black: 1,
				buyNum: 1,
				specificationsArr: ["默认", "默认1", "默认2"],
				// show: false,
				backgroundColor: "transparent",
				evaluateList: [],
				heightConfig: {},
				phone: '',
				userQR: {
					avatar: "",
					nickName: "",
					ID: "",
					QrCode: "",
				},
				goodBannerImg: []
				// product: [
				//   {
				//     goodName: "淡斑护肤品套装",
				//     count: 1,
				//     retailPrice: 949,
				//     ml: 50,
				//     selectKey: true,
				//   },
				//   {
				//     goodName: "淡斑护肤品套装",
				//     count: 1,
				//     retailPrice: 949,
				//     ml: 50,
				//     selectKey: false,
				//   },
				// ],
			};
		},
		async onLoad(options) {
			this.homePage = false
			if (options.id) {
				this.goodId = options.id;
			}
			if (options.scene) {
				this.userInfo = uni.getStorageSync("userInfo");
				const sceneParams = decodeURIComponent(options.scene).split('&');
				this.goodId = sceneParams[0]?.split('=')[1];
				const codeUserId = sceneParams[1]?.split('=')[1]
				if (!this.userInfo) {
					uni.setStorageSync("codeUserId", codeUserId);
				}
				let obj = {
					promotionId: codeUserId,
					userId: this.userInfo.userId,
				};
				console.log(obj, "obj");
				loginApi.binding(obj).then((res) => {
					if (res.code == 200) {
					}
				});
				this.homePage = true
			}
			this.getGoodDetail();
			// this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			this.heightConfig = this.$store.getters.heightData;
		},
		onShow() {
			this.getGoodReviews();
			this.contentList();
			this.userInfo = uni.getStorageSync("userInfo");
			if (uni.getStorageSync("token")) {
				this.getUserInfo()
				const codeUserId = uni.getStorageSync("codeUserId");
				if (codeUserId) {
					let obj = {
						promotionId: codeUserId,
						userId: this.userInfo.userId,
					};
					loginApi.binding(obj).then((res) => {
						if (res.code == 200) {
							uni.removeStorageSync("codeUserId");
						} else {}
					});
				}
			}
			// this.userQrShow = false
		},
		methods: {
			userShow() {
				if (!uni.getStorageSync("token")) {
					this.getUserInfo()
					return
				}
				this.userInfo = uni.getStorageSync("userInfo");
				this.getCreateUserQR()
			},
			saveImageToAlbum(filePath) {
				uni.saveImageToPhotosAlbum({
					filePath,
					success: () => {
						uni.showToast({
							title: "保存成功",
							icon: "success",
						});
					},
					fail: (err) => {
						console.error("Failed to save image:", err);
						uni.showToast({
							title: "保存失败",
							icon: "none",
						});
					},
				});
			},
			saveImg() {
				if (!this.poster || this.poster == null || this.poster == undefined) {
					uni.hideLoading();
					uni.showToast({
						title: "海报生成失败",
						icon: "none",
						mask: true,
					});
					return;
				}
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							// 用户未授权，向用户发起授权请求
							uni.authorize({
								scope: "scope.writePhotosAlbum",
								success: (res) => {
									// 用户同意授权，继续保存图片
									this.saveImageToAlbum(this.poster);
								},
								fail: () => {
									// 用户拒绝授权，提示用户开启权限
									uni.showModal({
										title: "提示",
										content: "需要您授权保存图片到相册",
										success: (result) => {
											if (result.confirm) {
												// 引导用户去设置页面开启权限
												uni.openSetting();
											}
										},
									});
								},
							});
						} else {
							// 用户已授权，直接保存图片
							console.log(22222, "用户已授权，直接保存图片");
							this.saveImageToAlbum(this.poster);
						}
					},
				});
			},
			getCreateUserQR() {
				uni.showLoading({
					title: "海报生成中...",
				});

				uni.request({
					url: this.baseUrl + `/applet/good/getGoodQrCode/${this.goodId}/${this.userInfo.userId}`,
					method: "GET",
					header: {
						Authorization: "Bearer " + getToken(),
					},
					// responseType: "arraybuffer",
					success: (res) => {
						this.userQR.QrCode = this.baseImgUrl + res.data.msg
						this.userQrShow = true
						uni.hideLoading();
					},
					fail: (err) => {
						console.error("Failed to fetch image:", err);
					},
				});
			},
			painterSuccess() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: "url",
					quality: 1,
					success: (res) => {
						if (res.tempFilePath) {
							this.poster = res.tempFilePath;
						}
					},
					fail: (fail) => {
						console.log("fail===", fail);
					},
				});
			},
			// 获取用户信息
			getUserInfo() {
				userApi.fetchUserInfo().then((res) => {
					if (res.code == 200) {
						this.userQR.avatar = res.user.avatar;
						this.userQR.ID = `ID:${res.user.userId}`;
						this.userQR.nickName = res.user.nickName;
					}
				});
			},
			getGoodDetail() {
				productApi.getGoodDetail(this.goodId).then((res) => {
					if (res.code == 200) {
						this.goodDetail = res.data;
						this.goodBannerImg = res.data.goodBannerImg ? res.data.goodBannerImg.split(",") : []
						this.swiperList = res.data.goodImgOut ?
							res.data.goodImgOut.split(",") : [];
						let arr = []
						this.swiperList.forEach(item => {
							arr.push(this.baseImgUrl + item)
						})
						this.swiperList = arr
					}
				});
			},

			// 获取用户信息
			contentList() {
				userApi.getContent({
					pageNum: 1,
					pageSize: 99
				}).then((res) => {
					if (res.code == 200) {

						res.rows.forEach(function(element) {
							if (element.type == 6) {
								this.phone = element.content
							}
						}, this);
					}
				});
			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: () => {
						console.log('拨打电话成功！');
					},
					fail: () => {
						console.error('拨打电话失败！');
					}
				});

			},
			getGoodReviews() {
				let data = {
					goodId: this.goodId,
				};
				productApi.getGoodReviews(data).then((res) => {
					if (res.code == 200) {
						if (Array.isArray(res.rows) && res.rows.length != 0) {
							let arr = res.rows.map((item, index) => {
								return {
									...item,
									pics: item.pics.split(","),
								};
							});
							this.evaluateList = arr.slice(0, 2);
						}
					}
				});
			},
			addShoppingCart() {
				// if (this.goodDetail.ifPurchase) {
				//   uni.showToast({
				//     title: "该礼包已购买",
				//     icon: "none",
				//   });
				//   return;
				// }
				let data = {
					productId: this.goodId,
					cartNum: 1,
				};
				shoppingCart.addShoppingCart(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "加购成功！",
							icon: "none",
						});
					}
				});
			},
			pageBack() {
				// 扫码进来返回首页
				if(this.homePage == true){
					uni.switchTab({
						url: `/pages/index2`,
					});
					return
				}
				uni.navigateBack();
			},
			toEvaluateList() {
				uni.navigateTo({
					url: `/subPages/details/evaluateList?id=${this.goodId}`,
				});
			},
			collectFun() {
				collectApi.saveCollect({
					itemId: this.goodId
				}).then((res) => {
					if (res.code == 200) {
						this.goodDetail.isCollect = this.goodDetail.isCollect == 1 ? 0 : 1;
						uni.showToast({
							title: `${
              this.goodDetail.isCollect == 1 ? "收藏" : "取消收藏"
            }成功`,
							icon: "none",
							mask: true,
						});
					}
				});
			},
			// open() {
			//   console.log('open');
			// },
			// close() {
			//   this.show = false;
			// },
			// minusFun() {
			//   if (this.buyNum <= 2) {
			//     this.disabledMinus = true;
			//     this.buyNum -= 1;
			//   } else {
			//     this.disabledMinus = false;
			//     this.buyNum -= 1;
			//   }
			// },
			// plusFun() {
			//   this.disabledMinus = false;
			//   this.buyNum++;
			// },
			// sumbit() {
			//   this.show = false;
			// },
			pageTo() {
				// if (this.goodDetail.ifPurchase) {
				//   uni.showToast({
				//     title: "该礼包已购买",
				//     icon: "none",
				//   });
				//   return;
				// }
				uni.navigateTo({
					url: `/subPages/details/confirmOrder?source=detail&id=${this.goodId}`,
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.joinCar {
		width: 20%;
		height: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: red;

		.txt {
			width: 80%;
			height: 60%;
			border: 1px solid red;
			border-radius: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.popup-qr {
		width: 550rpx;
		height: 800rpx;
		margin: 20rpx;
		position: relative;

		.btn {
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			bottom: -250rpx;
			width: 350rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 80rpx;
			color: red;

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.goodDetail {
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		overflow-y: auto;

		.Narbar {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			z-index: 9;

			.back {
				width: 100%;
				background-color: #fff;
			}
		}

		.swiper {
			width: 750rpx;
			height: 750rpx;
			object-fit: cover;
			/* 或者使用 contain */
			// padding-top: 40px;
			position: relative;

			.Narbar_bo {
				position: absolute;
				top: 15%;
				left: 0;
				width: 100%;
				height: 35px;
				display: flex;
				padding: 0 28rpx;
				justify-content: space-between;
				align-items: center;
				z-index: 9;

				.title {
					font-size: 18px;
					font-weight: 600;
				}
			}

		}

		.introduce {
			width: calc(100% - 22rpx -22rpx);
			// height: 230rpx;
			margin: 22rpx 22rpx 0 22rpx;
			box-sizing: border-box;

			.price {
				width: 100%;
				height: 35%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;

				.num {
					// width: 45%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.Novip {
						margin-right: 4rpx;

						.span {
							font-size: 48rpx;
							font-weight: 600;
						}
					}

					.crossed {
						margin-right: 10rpx;

						.span {
							font-size: 28rpx;
							text-decoration: line-through;
						}
					}

					.VipPrice {
						width: 180rpx;
						height: 35rpx;
						background-color: #fee6c3;
						border-radius: 3px;
						display: flex;

						.vip {
							width: 50%;
							height: 100%;
							background: url("../../static/images/home/vip.png") no-repeat;
							background-size: 100% 100%;
							display: initial-block;
						}

						.span {
							text-align: center;
						}
					}
				}

				.sale {
					.span {
						padding: 0 10rpx;
						color: #000;
					}
				}
			}

			.synopsis {
				color: #000;
				font-size: 30rpx;
				line-height: 45rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			// .paratext {
			//   color: #868686;
			//   font-size: 24rpx;
			//   line-height: 50rpx;
			// }
		}

		.choose {
			width: calc(100% - 22rpx -22rpx);
			height: 180rpx;
			margin: 22rpx;
			border-top: 1rpx solid #dddddd;
			border-bottom: 1rpx solid #dddddd;

			.title {
				font-size: 31rpx;
				font-weight: 600;
				color: #000;
				height: 45%;
				display: flex;
				align-items: center;
			}

			.chooseItem {
				width: 100%;
				height: 55%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txt {
					color: #000;
				}

				.icon {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 15%;
				}
			}
		}

		.evaluate {
			width: calc(100% - 22rpx -22rpx);
			margin: 22rpx;
			border-bottom: 1rpx solid #dddddd;

			.title {
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txt {
					font-weight: 600;
					font-size: 31rpx;
					color: #000;
				}

				.icon {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 21%;
				}
			}

			.informationi {
				width: 100%;
				margin: 10rpx 0;

				.information {
					width: 100%;
					padding: 10rpx 0;
					display: flex;
					justify-content: space-between;

					.author {
						display: flex;
						align-items: center;

						.image {
							width: 100rpx;
							height: 100rpx;
							margin-right: 8rpx;

							.images {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.author_info {
							height: 100rpx;

							.nameALevel {
								height: 50rpx;
								line-height: 50rpx;
								display: flex;
								align-items: center;

								.name {
									color: #000;
									font-weight: 600;
									font-size: 30rpx;
									margin-right: 5rpx;
								}

								.image {
									width: 80rpx;
									height: 50rpx;
								}
							}

							.time {
								height: 50rpx;
								line-height: 50rpx;
							}
						}
					}

					.stars {
						display: flex;
						align-items: start;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.comment {
					padding: 10rpx 0 16rpx;
					width: 100%;
					color: #000;
				}

				.pics {
					display: flex;
					flex-wrap: wrap;
					margin: 0 0 10rpx;

					image {
						width: 226rpx;
						height: 226rpx;
					}

					.pics-item-2 {
						width: 339rpx;
						height: 339rpx;
						margin: 0 14rpx 14rpx 0;
					}

					.pics-item-2:nth-child(2n) {
						margin-right: 0;
					}

					.pics-item-3 {
						margin: 0 14rpx 14rpx 0;
					}

					.pics-item-3:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}

		.goodIntroduce {
			width: calc(100% - 22rpx -22rpx);
			height: auto;
			margin: 22rpx 22rpx 170rpx 22rpx;

			.title {
				font-size: 31rpx;
				font-weight: 600;
				color: #000;
				height: 70rpx;
				display: flex;
				align-items: center;
			}

			.shop-image {
				width: 100%;
				// height: 250rpx;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					// height: auto; /* 保持图片原始宽高比 */
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 160rpx;
			padding-bottom: 10rpx;
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #fff;

			.box {
				width: 20%;
				height: 80%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 50%;
					height: 50%;
				}
			}


			.immeBuy {
				width: 40%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;

				.txt {
					width: 80%;
					height: 60%;
					background-color: #000;
					border: 1px solid #000;
					border-radius: 25px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.popup {
			width: 100%;
			height: 60vh;
			padding: 21rpx 28rpx;
			position: relative;
			// box-sizing: border-box;

			.product {
				width: 100%;
				height: 13vh;
				display: flex;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 5px;
				}

				.product_info {
					width: calc(100% - 200rpx);
					height: 180rpx;
					padding-left: 20rpx;
					font-weight: 600;

					.title {
						width: 100%;
						height: 50rpx;
						color: "#000";
					}

					.price {
						width: 100%;
						height: 80rpx;

						.span {
							font-size: 50rpx;
							height: 80rpx;
							line-height: 80rpx;
						}
					}
				}
			}

			.specifications {
				width: 100%;

				.title {
					color: #000;
					font-weight: 600;
					height: 60rpx;
					line-height: 60rpx;
				}

				.specificationsArr {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 10px;

					.specificationsi {
						border: 1px solid #b2b2b2;
						border-radius: 5px;
						height: 70rpx;
						line-height: 70rpx;
						width: 150rpx;
						text-align: center;
					}

					.active_black {
						color: #fff;
						background-color: #000;
					}

					.default {
						color: #868686;
						background-color: #fff;
					}
				}
			}

			.buyNum {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					color: #000;
					font-weight: 600;
				}

				.computer {
					display: flex;
					align-items: center;
					font-size: 35rpx;

					button {
						padding: 8rpx !important;
						margin: 10rpx;
					}

					.black {
						background-color: #000;
						color: #fff;
					}
				}
			}

			.popup_bottom {
				border-top: 1px solid #dddddd;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 170rpx;
				position: absolute;
				bottom: 0;
				left: 0;

				.black {
					background-color: #000;
					color: #fff;
					border-radius: 25px;
					width: 80%;
				}
			}
		}
	}
</style>